<template>
    <div>

        <!-- <el-row>
				<el-col>

				</el-col>
				<el-col>
					
				</el-col>
				<el-col>
					
				</el-col>
				<el-col>
					
				</el-col>
			</el-row> -->
    </div>

    <div class="hyyy">
        <div class="title title3">
            <h2>{{hyyy_title}}</h2>
            <p>{{ hyyy_desc }}</p>
            <span></span>
        </div>
        <ul class="w1700">
            <dl v-for="(item,index) in hyyy" :key="index" :class="index==4?'lr':''"><a :href="item.link">
                    <dt><img :src="vite_url+'/storage/'+item.img" alt=""></dt>
                    <dd class="dd1">
                        <h3>{{item.title}}</h3>
                        <p>{{item.en_title}}</p>
                    </dd>
                    <dd class="dd2">
                        <h4>{{item.en_title}}</h4>
                        <h3>{{item.title}}</h3>
                        <p>{{ item.desc }}</p>
                    </dd>
                </a></dl>
            <!--
            <dl ><a href="/jjfa.html">
            	<dt><img src="/public/images/home/yy1.jpg" alt=""></dt>
                <dd class="dd1">
                	<h3>环保</h3>
                    <p>Environmental protection</p>
                </dd>
                <dd class="dd2">
                	<h4>Environmental protection</h4>
                	<h3>环保</h3>
                    <p>熠远精科是一家专业从事离子色谱仪及核心部件的研发、生产、销售和售后服务的高新技术企业，目前已为7000+不同行业的用户提供了完善的解决方案。</p>
                </dd>
            </a></dl>
            
            <dl><a href="/jjfa.html">
            	<dt><img src="/public/images/home/yy2.jpg" alt=""></dt>
                <dd class="dd1">
                	<h3>卫生防疫</h3>
                    <p>Health prevention</p>
                </dd>
                <dd class="dd2">
                	<h4>Health prevention</h4>
                	<h3>卫生防疫</h3>
                    <p>熠远精科是一家专业从事离子色谱仪及核心部件的研发、生产、销售和售后服务的高新技术企业，目前已为7000+不同行业的用户提供了完善的解决方案。</p>
                </dd>
            </a></dl>
            <dl><a href="/jjfa.html">
            	<dt><img src="/public/images/home/yy3.jpg" alt=""></dt>
                <dd class="dd1">
                	<h3>食品</h3>
                    <p>Food</p>
                </dd>
                <dd class="dd2">
                	<h4>Food</h4>
                	<h3>食品</h3>
                    <p>熠远精科是一家专业从事离子色谱仪及核心部件的研发、生产、销售和售后服务的高新技术企业，目前已为7000+不同行业的用户提供了完善的解决方案。</p>
                </dd>
            </a></dl>
            <dl><a href="/jjfa.html">
            	<dt><img src="/public/images/home/yy4.jpg" alt=""></dt>
                <dd class="dd1">
                	<h3>水文地质</h3>
                    <p>Hydrogeology</p>
                </dd>
                <dd class="dd2">
                	<h4>Hydrogeology</h4>
                	<h3>水文地质</h3>
                    <p>熠远精科是一家专业从事离子色谱仪及核心部件的研发、生产、销售和售后服务的高新技术企业，目前已为7000+不同行业的用户提供了完善的解决方案。</p>
                </dd>
            </a></dl>
            <dl class="lr"><a href="/jjfa.html">
            	<dt><img src="/public/images/home/yy5.jpg" alt=""></dt>
                <dd class="dd1">
                	<h3>电子电器</h3>
                    <p>Electronic electrical</p>
                </dd>
                <dd class="dd2">
                	<h4>Electronic electrical</h4>
                	<h3>电子电器</h3>
                    <p>熠远精科是一家专业从事离子色谱仪及核心部件的研发、生产、销售和售后服务的高新技术企业，目前已为7000+不同行业的用户提供了完善的解决方案。</p>
                </dd>
            </a></dl>
        -->
        </ul>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import axios from 'axios';
const vite_url: string = window.VITE_URL
const hyyy_title: any = ref<string>('')
const hyyy_desc: any = ref<string>('')
const hyyy: any = ref<Array<object>>()
const get_hyyy = () => {


    const url = vite_url + '/yyjk/home/hyyy';

    // console.log(url,data)
    axios.get(url).then((res: any) => {

        hyyy_title.value = res.data.title;
        hyyy_desc.value = res.data.desc;
        hyyy.value = res.data.list;

    });

}
get_hyyy();

</script>

<style scoped>
.hyyy {
    padding: 60px 0 80px 0;
    background: #F5F5F5;
    overflow: hidden;
    /* margin:0 auto; */
    text-align:center;
}

.hyyy dl {
    width: 319px;
    height: 568px;
    margin: 60px 26px 0 0;
    float: left;
    position: relative;
    overflow: hidden;
}

.hyyy dl.lr {
    margin: 60px 0 0 0;
}

.hyyy dl dt {
    width: 319px;
    height: 568px;
}

.hyyy dl dt img {
    width: 100%;
    height: 100%;
}

.hyyy dl dd {
    width: 259px;
    position: absolute;
}

.hyyy dl dd.dd1 {
    padding: 0 30px;
    left: 0;
    bottom: 20px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hyyy dl:hover dd.dd1 {
    bottom: -65px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hyyy dl dd.dd1 h3 {
    font-size: 24px;
    color: #FFF;
}

.hyyy dl dd.dd1 p {
    width: 100%;
    padding: 5px 0;
    font-size: 18px;
    color: #FFF;
    border-bottom: 1px solid #FFF;
}

.hyyy dl dd.dd2 {
    width: 259px;
    height: 568px;
    padding: 0 30px;
    left: -319px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hyyy dl:hover dd.dd2 {
    left: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hyyy dl dd.dd2 h4 {
    line-height: 40px;
    padding: 100px 0 50px 0;
    font-size: 36px;
    color: #FFF;
}

.hyyy dl dd.dd2 h3 {
    padding-bottom: 30px;
    font-size: 36px;
    color: #FFF;
}

.hyyy dl dd.dd2 p {
    line-height: 25px;
    font-size: 14px;
    color: #FFF;
}


@media screen and (max-width:1680px) {

    /* 行业应用 */
    .hyyy dl {
        width: 304px;
        height: 540px;
        margin: 60px 20px 0 0;
    }

    .hyyy dl dt {
        width: 304px;
        height: 540px;
    }

    .hyyy dl dd.dd1 {
        width: 244px;
    }

    .hyyy dl dd.dd2 {
        width: 244px;
        height: 540px;
        left: -304px;
    }
}


@media screen and (max-width:1440px) {

    /* 行业应用 */
    .hyyy dl {
        width: 248px;
        height: 442px;
        margin: 60px 20px 0 0;
    }

    .hyyy dl dt {
        width: 248px;
        height: 442px;
    }

    .hyyy dl dd {
        width: 228px;
    }

    .hyyy dl dd.dd1 {
        padding: 0 10px;
    }

    .hyyy dl dd.dd1 h3 {
        font-size: 20px;
    }

    .hyyy dl dd.dd1 p {
        font-size: 15px;
    }

    .hyyy dl dd.dd2 {
        width: 228px;
        height: 442px;
        padding: 0 10px;
        left: -248px;
    }

    .hyyy dl dd.dd2 h4 {
        line-height: 30px;
        padding: 50px 0 30px 0;
        font-size: 26px;
    }

    .hyyy dl dd.dd2 h3 {
        padding-bottom: 20px;
        font-size: 26px;
    }

    .hyyy dl dd.dd2 p {
        line-height: 22px;
    }
}

@media screen and (max-width:1366px) {

    /* 行业应用 */
    .hyyy dl {
        width: 219px;
        height: 390px;
        margin: 60px 20px 0 0;
    }

    .hyyy dl dt {
        width: 219px;
        height: 390px;
    }

    .hyyy dl dd {
        width: 199px;
    }

    .hyyy dl dd.dd1 {
        padding: 0 10px;
    }

    .hyyy dl dd.dd1 h3 {
        font-size: 20px;
    }

    .hyyy dl dd.dd1 p {
        font-size: 15px;
    }

    .hyyy dl dd.dd2 {
        width: 199px;
        height: 390px;
        padding: 0 10px;
        left: -219px;
    }

    .hyyy dl dd.dd2 h4 {
        line-height: 30px;
        padding: 50px 0 30px 0;
        font-size: 26px;
    }

    .hyyy dl dd.dd2 h3 {
        padding-bottom: 20px;
        font-size: 26px;
    }

    .hyyy dl dd.dd2 p {
        line-height: 22px;
    }
}

@media screen and (max-width:768px) {

    /* 行业应用 */
    .hyyy {
        padding: 30px 0;
    }

    .hyyy dl {
        width: 48%;
        height: auto;
        margin: 10px 2% 0 0;
    }

    .hyyy dl.lr {
        margin: 20px 0 0 0;
    }

    .hyyy dl dt {
        width: 100%;
        height: auto;
    }

    .hyyy dl dd.dd1 {
        width: 90%;
        padding: 0 5%;
        bottom: 40px;
    }

    .hyyy dl dd.dd1 h3 {
        font-size: 20px;
    }

    .hyyy dl dd.dd1 p {
        font-size: 16px;
    }

    .hyyy dl dd.dd2 {
        display: none;
    }

}</style>
